<template>
	<view style="background-color: #f7f7f7;">
		<u-swiper :list="swiperList" height="210" keyName="url" @click="swriper" circular></u-swiper>
		<view class="hint flex">
			<view style="font-size: 28rpx;padding-left: 10vw;">
				按摩到家，请记住：<text
					style="color: #75d9a8;font-size: 42rpx; font-weight: bold;  font-style: italic;">xxx.com</text>
			</view>
			<view
				style="position: absolute;top:68rpx;border-top-right-radius: 20px;border-top-left-radius: 20px;width: calc(100vw - 40rpx); z-index: 22;padding-bottom:40rpx;box-sizing: border-box;background-color: #fff;margin: 0 20rpx;box-sizing: border-box;">
				<sevenq-tab :active-tab="activeTab" :tab-list="tabList" :object-style="objectStyle"
					style="z-index: 99 !important;" @change="(e)=>activeTab= e" />
			</view>
		</view>
		<view class="main">
			<home-card v-for="(item,index) in projectList" :index="index" :key="index" :item="item"></home-card>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				objectStyle: {
					tabHeight: "50px",
					activeColor: "#ffffff",
					defaultColor: "#edfaf4",
					primaryColor: "#506CEB",
					borderRadius: '12px'
				},
				activeTab: 1,
				tabList: [{ //传递几个就显示几个tab栏（一般最3>tab>2）
						id: 1,
						label: '推荐项目',
					},
					{
						id: 2,
						label: '调理项目',
					},

				],
				dataList: [{

						name: '中式按摩',
						icon: '../../static/project/a.png',
						tips: '缓解颈椎,腰肌劳损',
						original: '318',
						price: '218',
						num: '26587',
						tag: '',
						timer: '60'
					},
					{
						name: '泰式SPA',
						icon: '../../static/project/d.png',
						tips: '缺乏运动,腰酸背痛',
						original: '498',
						price: '398',
						num: '15195',
						tag: '超值特惠',
						timer: '120'
					},
					{
						name: '通络培元',
						icon: '../../static/project/e.png',
						tips: '祛湿通络,激活能量',
						original: '398',
						price: '298',
						num: '80397',
						tag: '',
						timer: '80'
					},
					{
						name: '山城足疗',
						icon: '../../static/project/c.png',
						tips: '调理气机,疏经活络',
						original: '298',
						price: '198',
						num: '7433',
						tag: '',
						timer: '60'
					},
					{
						name: '非遗采耳',
						icon: '../../static/project/b.png',
						tips: '静心助眠,缓解压力',
						original: '388',
						price: '238',
						num: '2765',
						tag: '放松解压',
						timer: '90'
					}
				],
				flag: '',
				swiperList: [{
						url: '/static/swriper/swriper1.png'
					},
					{
						url: '/static/swriper/swriper2.png'
					}
				],
			}
		},
		computed: {
			projectList() {
				let list = [{
						id: 1,
						name: '中式按摩',
						icon: '../../static/project/a.png',
						tips: '缓解颈椎,腰肌劳损',
						original: '318',
						price: '218',
						num: '26587',
						tag: '',
						timer: '60'
					},
					{
						id: 2,
						name: '泰式SPA',
						icon: '../../static/project/d.png',
						tips: '缺乏运动,腰酸背痛',
						original: '498',
						price: '398',
						num: '15195',
						tag: '超值特惠',
						timer: '120'
					},
					{
						id: 3,
						name: '通络培元',
						icon: '../../static/project/e.png',
						tips: '祛湿通络,激活能量',
						original: '398',
						price: '298',
						num: '80397',
						tag: '',
						timer: '80'
					},
					{
						id: 4,
						name: '山城足疗',
						icon: '../../static/project/c.png',
						tips: '调理气机,疏经活络',
						original: '298',
						price: '198',
						num: '7433',
						tag: '',
						timer: '60'
					},
					{
						id: 5,
						name: '非遗采耳',
						icon: '../../static/project/b.png',
						tips: '静心助眠,缓解压力',
						original: '388',
						price: '238',
						num: '2765',
						tag: '放松解压',
						timer: '90'
					}
				]
				if (this.activeTab == 2) {
					list = list.map((item, index) => {
						return {
							id: 10 + index,
							...item,
							name: '调理项目'
						}
					})
				}
				return list
			}
		},
		onLoad() {

		},
		methods: {
			swriper(index) {
				console.log("我点击了", index);
			},
			tabChanged(index) {
				console.log("tabChanged", index);
			}
		}
	}
</script>

<style lang="scss">
	.hint {
		border-radius: 20px 20px 0px 0px;
		position: relative;
		z-index: 11;
		margin-top: -55rpx;
		height: 186rpx;
		background: linear-gradient(#dbf6ea, #e1f8ee);
	}

	.main {
		background: linear-gradient(#e1f8ee, #fff 70%);
		max-width: 100vw;
		padding: 0 20rpx;
		margin-bottom: 4vh;

	}
</style>